.change-history {
	background: var(--color-bg-2);

	&::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 1px;
		height: 100%;
		background: var(--color-border-2);
		content: ' ';
	}

	.title {
		padding: 0.5rem;
		line-height: 1;
		background: var(--color-bg-3);
		border-bottom: 1px solid var(--color-border-2);
	}

	.item {
		margin: 0.5rem;
		padding: 0.5rem;
		background: var(--color-bg-1);
		border: 1px solid transparent;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.3s ease;
		user-select: none;

		.changes {
			line-height: 2;

			.count + .count {
				margin-left: 1rem;
			}
		}

		.create-time {
			font-size: var(--text-sm);
		}

		&.active {
			color: var(--color-text-9);
			background: var(--color-5);
			box-shadow: 0px 0px 2px #00000024;
		}

		&:hover {
			border: 1px solid var(--color-5);
		}
	}
}
